<template>
  <div>
    <la-dialog
      ref="dialogRef"
      :title="dialogTitle"
      :async="true"
      @confirm="handleSubmit"
      @cancel="handleClose"
      width="700px"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="84px"
        :rules="formRules"
      >
        <el-form-item label="字典名称" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="字典标识" prop="code">
          <el-input v-model="formData.code" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="formData.remark" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="formData.status">
            <el-radio label="normal">正常</el-radio>
            <el-radio label="disabled">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数据">
          <el-table :data="formData.column_list" style="width: 100%">
            <el-table-column prop="name" label="字段名称" width="150">
              <template #default="scope">
                <el-input v-model="scope.row.name" />
              </template>
            </el-table-column>
            <el-table-column prop="column" label="字段配置名" width="150">
              <template #default="scope">
                <el-input v-model="scope.row.column" />
              </template>
            </el-table-column>
            <el-table-column prop="type" label="字段类型" width="150">
              <template #default="scope">
            
                <el-select v-model="scope.row.type" class="m-2" placeholder="请选择类型">
    <el-option
      v-for="item in typeOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="操作" width="100">
              <template #default="scope">
                <el-button type="danger" icon="Delete" circle @click="handleDeleteRow(scope.$index)" />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="操作">
            <el-button type="primary" @click="handleCreateRow">添加列</el-button>
        </el-form-item>
      </el-form>
    </la-dialog>
  </div>
</template>
  <script setup>
import api from "@/lnk/admin/api";
import laDialog from "@/lnk/components/la-dialog/index.vue";
import { reactive, ref, computed, nextTick } from "vue";
import feedback from "@/lnk/utils/feedback";

const emit = defineEmits(["success", "close"]);
const dialogRef = ref(null);
const formRef = ref(null);
const mode = ref("add");
const formData = ref({
  name: "",
  code: "",
  remark: "",
  status: "normal",
  column_list:[],
});
const formRules = reactive({
  name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
  code: [{ required: true, message: "请输入字典标识", trigger: "blur" }],
});

const roleOptions = ref([]);
const deptOptions = ref([]);

const dialogTitle = computed(() => {
  return mode.value == "edit" ? "编辑字典类型" : "新增字典类型";
});

// 类型选项
const typeOptions = reactive([
    {
        label:'文本框',
        value:'input'
    },
    {
        label:'单图',
        value:'upload'
    },
])



const handleCreateRow = async () =>{
    formData.value.column_list.push({
        name:'',
        column:'',
        type:''
    });
}

const handleDeleteRow = async (index) =>{
    formData.value.column_list.splice(index,1);
}

const getRoleOptions = async () => {
  const roleRes = await api.role.list();
  roleOptions.value = roleRes.data;
};

const getDeptOptions = async () => {
  const res = await api.dept.list();
  deptOptions.value = res.data;
};

const setFormData = async (row) => {
  const res = await api.dictType.read({ id: row.id });
  formData.value = res.data;
};

const open = (type = "add") => {
  mode.value = type;
  dialogRef.value.open();
};
const close = () => {
  formRef.value.resetFields();
  dialogRef.value.close();
};
const handleSubmit = async () => {
  await formRef.value?.validate();
  let res;
  if (mode.value == "add") {
    res = await api.dictType.create(formData.value);
  } else {
    res = await api.dictType.update(formData.value);
  }

  if (!res.error) {
    close();
    emit("success");
    feedback.msgSuccess(res.msg);
  } else {
    feedback.msgError(res.msg);
  }
};
const handleClose = async () => {
  emit("close");
};
getRoleOptions();
getDeptOptions();
defineExpose({
  open,
  setFormData,
});
</script>
  